import request from "../../utils/request"
import westore from "../../utils/westore/westore"
import moment from 'moment'

westore.createPage({
  // 是否在拖拽进度条
  isDragSlider: false,
  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false,
    // 歌曲基本信息
    songInfo: {},
    // 实时时间
    currentTime: '00:00',
    // 总时长
    durationTime: '00:00',
    // 音乐的链接
    musicLink: '',
    //  音乐滑块的值
    sliderValue: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 初始化播放器
    this.initAudioPlayer();

    // 显示歌曲基本信息
    this.musicControl();
  },

  // 初始化音乐播放器
  initAudioPlayer() {
    // 创建控制音乐播放的实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    // 监视音乐播放/暂停/停止
    this.backgroundAudioManager.onPlay(() => {
      this.changePlayState(true);
      // 修改全局音乐播放的状态
    });
    this.backgroundAudioManager.onPause(() => {
      this.changePlayState(false);
    });
    this.backgroundAudioManager.onStop(() => {
      this.changePlayState(false);
    });

    // 监听音乐播放自然结束
    this.backgroundAudioManager.onEnded(() => {
      // 自动切换至下一首音乐，并且自动播放
      this.changePlayState(false);
    });

    // 监听音乐实时播放的进度
    this.backgroundAudioManager.onTimeUpdate(() => {
      // console.log('总时长: ', this.backgroundAudioManager.duration);
      // console.log('实时的时长: ', this.backgroundAudioManager.currentTime);

      // 滑条时间
      let sliderValue = this.backgroundAudioManager.currentTime / this.backgroundAudioManager.duration * 100;
      // 格式化实时的播放时间
      let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss')
      if (this.isDragSlider) {
        this.setData({
          currentTime
        })
      } else {
        this.setData({
          currentTime,
          sliderValue
        })
      }
    })
  },

  // 控制歌曲切换
  musicControl() {
    let songIndex = this.store.data.selectSongIndex;
    let songList = this.store.data.songList;
    let songInfo = songList[songIndex];
    // 动态修改窗口标题
    wx.setNavigationBarTitle({
      title: songInfo.trackName
    })
    // 设置歌曲本地信息
    this.setData({
      songInfo: songInfo,
    });


    // 获取歌曲信息
    this.getSongInfo();
  },

  // 获取歌曲详情
  async getSongInfo() {
    // 获取歌曲链接
    let musicLinkData = await request.get('song/url', { id: this.data.songInfo.trackId }, true);
    let musicLink = musicLinkData.data[0].url;
    // 设置歌曲开始播放
    this.backgroundAudioManager.src = musicLink;
    this.backgroundAudioManager.title = this.data.songInfo.trackName;

    // 获取歌曲时长
    let songDetailData = await request.get("song/detail", { ids: this.data.songInfo.trackId });
    let durationTime = moment(songDetailData.songs[0].dt).format('mm:ss');
    this.setData({
      isPlay: true,
      durationTime
    });
  },

  // 当播放控件状态修改时，修改播放界面
  changePlayState(isPlay) {
    this.setData({
      isPlay
    });
  },

  // 点击播放/暂停的回调
  handleMusicPlay() {
    let isPlay = !this.data.isPlay;

    if (isPlay) {
      this.backgroundAudioManager.play();
    } else { // 暂停音乐
      this.backgroundAudioManager.pause();
    }
  },

  // 滑动条滑动时关闭自动更新slider进度条
  sliderChanging() {
    this.isDragSlider = true;
  },

  // 进度条滑动完成，设置歌曲跳转
  sliderChange(event) {
    let sliderValue = event.detail.value;
    // 获取当前时间原始值
    let currOriginalTime = sliderValue / 100.0 * this.backgroundAudioManager.duration;
    // 跳转到歌曲指定位置
    this.backgroundAudioManager.seek(currOriginalTime);
    this.isDragSlider = false;
  },

  // 上一曲/下一曲切换
  handleSwitch(event) {
    let id = event.target.id;
    let selectSongIndex = this.store.data.selectSongIndex;

    if (id == 'pre') {
      // 上一曲
      if (selectSongIndex <= 0) {
        wx.showToast({
          title: '第一首歌了',
        })
        return;
      }
      --selectSongIndex;
      this.store.update({
        selectSongIndex
      });

      this.musicControl();
    }
    else {
      // 下一曲
      if (selectSongIndex == this.store.data.songList.length-1) {
        wx.showToast({
          title: '最后一首歌了',
        })
        return;
      }
      ++selectSongIndex;
      this.store.update({
        selectSongIndex
      });

      this.musicControl();
    }
  }
})